<template>
<div>
      <v-card
      class="ma-3 d-flex flex-no-wrap justify-space-between align-center"
      v-for="item in artList"
      :key="item.id"
      :to="{ path: '/article/detail/' + item.ID }"
    >
      <v-avatar class="ma-3 hidden-sm-and-down" size="125" tile>
        <img :src="item.img" :alt="item.title" :title="item.title" />
      </v-avatar>

      <v-col>
        <v-card-title>
          <v-chip color="pink" outlined label class="mr-3 white--text">{{
            item.Category.name
          }}</v-chip>
          <div>{{ item.title }}</div>
        </v-card-title>
        <v-card-subtitle class="mt-1" v-text="item.desc"></v-card-subtitle>
        <v-divider class="mx-4"></v-divider>
        <v-card-text class="d-flex align-center">
          <div class="d-flex align-center">
            <v-icon class="mr-1" small>{{ "mdi-calendar-month" }}</v-icon>
            <span>{{ item.CreatedAt | dateformat("YYYY-MM-DD HH:MM") }}</span>
          </div>
          <div class="mx-4 d-flex align-center">
            <v-icon class="mr-1" small>{{ "mdi-comment" }}</v-icon>
            <span>{{ item.comment_count }}</span>
          </div>
          <div class="mx-1 d-flex align-center">
            <v-icon class="mr-1" small>{{ "mdi-eye" }}</v-icon>
            <span>{{ item.read_count }}</span>
          </div>
        </v-card-text>
      </v-col>
    </v-card>
</div>

</template>


<script>
export default {
  name: "Mpagination",
  props: {
    artList: {
      type: Array,
      default: 10,
    },
  },
  created() {
    // console.log(this.length )
  },
  computed: {
  },
  methods: {
  },
};
</script>
<style scoped>
</style>